"use client";

import React from 'react';
import { ConfigProvider, App } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { useEffect, useState } from 'react';
import LoadingProvider from './LoadingProvider';

interface AntdProviderProps {
  children: React.ReactNode;
}

export default function AntdProvider({ children }: AntdProviderProps) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  // 防止服务端渲染时的样式闪烁
  if (!mounted) {
    return (
      <div style={{ 
        visibility: 'hidden',
        minHeight: '100vh',
        background: '#f0f2f5'
      }}>
        {children}
      </div>
    );
  }

  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: '#1890ff',
          borderRadius: 6,
        },
        components: {
          Layout: {
            bodyBg: '#f0f2f5',
            headerBg: '#fff',
            siderBg: '#001529',
          },
          Menu: {
            darkItemBg: '#001529',
            darkItemSelectedBg: '#1890ff',
          },
        },
      }}
    >
      <App>
        <LoadingProvider>
          <div className="ant-app">
            {children}
          </div>
        </LoadingProvider>
      </App>
    </ConfigProvider>
  );
} 